<?php
//use_javascript("http://jqueryui.com/themeroller/themeswitchertool/");
?>

<script type="text/javascript">
$(document).ready(
    function()
    {
        $('#tabs, #tabs2, #tabs3').tabs();
        //$('#switcher').themeswitcher();

        // Dialog
        $('#itemDialog').dialog({
            autoOpen: false,
            width: 400,
            minWidth: 400,
            dialogClass: "dialog",
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                }
            }
        });

        $('#itemLink').click(function(){
            $('#itemDialog').dialog('open');
            return false;
        });

        // Dialog
        $('#historyDialog').dialog({
            autoOpen: false,
            width: 400,
            minWidth: 400,
            dialogClass: "dialog",
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                }
            }
        });

        $('#historyLink').click(function(){
            $('#historyDialog').dialog('open');
            return false;
        });

        //hover states on the static widgets
        $('span#points, span#attendance, .ui-state-default').hover(
        function() { $(this).addClass('ui-state-hover'); },
        function() { $(this).removeClass('ui-state-hover'); }
    );
    });
</script>
<style type="text/css">
    .number { text-align: right; padding: 0.3em 0.5em 0.3em 0.5em; }
    .text { text-align: left; padding: 0.3em 0.5em 0.3em 0.5em; }
    .date { text-align: left; padding: 0.3em 0.5em 0.3em 0.5em; }

    #primaryDiv { width: 600px; height: 100%; padding: 2px; position: relative; text-align: center; }
    #primaryDiv h3 { margin: 0; padding: 2px; text-align: center; }
    span#points     { margin: 10px 2px 2px 2px; padding: 2px; text-align: center; display: inline-block; width: 178px; }
    span#attendance { margin: 6px 2px 2px 2px; padding: 2px; text-align: center; display: inline-block; width: 101px; }
    .clear { clear: both; }

    #tabs { text-align: center; margin: 40px 0px 0px 0px; font-size: 1.1em; }
    #tabs2 { text-align: center; margin: 40px 0px 0px 0px; font-size: 1.1em; }
    #tabs table, #tabs2 table, #historyDialog table { padding: 0px; margin: 0px; border-spacing: 0px; border: 0px; font-size: 1em; }
    #itemDialog table { padding: 0px; margin: 0px; border-spacing: 0px; border: 0px; font-size: 1.1em; }
    #tabs th, #tabs2 th, #tabs3 th { font-size: 1em; }
    .dialog { text-align: center; font-size: 1em; }
    #itemDialog, #historyDialog { text-align: center; font-size: 1em; }
</style>
<div id="itemDialog" title="Item Purchases">
    <div id="tabs3">
        <ul>
            <li><a href="#tabs3-players" title="Players Obtained">Players Obtained</a></li>
        </ul>
        <div id="tabs3-players">
            <table width="100%">
                <thead>
                    <tr>
                        <th class="ui-widget ui-state-default ui-corner-tl" width="45%">Date</th>
                        <th class="ui-widget ui-state-default" width="35%">Player</th>
                        <th class="ui-widget ui-state-default ui-corner-tr" width="20%">Cost</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ui-widget-content date">2010-02-03 11:29 AM MST</td>
                        <td class="ui-widget-content text">Sithie</td>
                        <td class="ui-widget-content number">-150</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="historyDialog" title="History of [date]">
    <span id="points" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">Points: 250</span>
    <div id="tabs2">
        <ul>
            <li><a href="#tabs2-players" title="Players Attended">Players Attended</a></li>
        </ul>
        <div id="tabs2-players">
            <table width="100%">
                <thead>
                    <tr>
                        <th class="ui-widget ui-state-default ui-corner-tl" width="80%">Players</th>
                        <th class="ui-widget ui-state-default ui-corner-tr" width="20%">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ui-widget-content text">Sithie</td>
                        <td class="ui-widget-content number">5</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="switcher"></div>
<div id="primaryDiv" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Sithie</h3>
    <span id="points" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">Points: 500</span>
    <span id="points" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">Earned: 5000</span>
    <span id="points" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">Spent: 4500</span>
    <span id="attendance" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">30 Day: 100%</span>
    <span id="attendance" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">60 Day: 100%</span>
    <span id="attendance" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">90 Day: 95%</span>
    <span id="attendance" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">120 Day: 90%</span>
    <span id="attendance" class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all">Lifetime: 50%</span>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-item">Item History</a></li>
            <li><a href="#tabs-point">Point History</a></li>
            <li><a href="#tabs-raid">Raid History</a></li>
        </ul>
        <div id="tabs-item">
            <table width="100%">
                <thead>
                    <tr>
                        <th class="ui-widget ui-state-default ui-corner-tl" width="30%">Date</th>
                        <th class="ui-widget ui-state-default" width="50%">Item</th>
                        <th class="ui-widget ui-state-default ui-corner-tr" width="20%">Cost</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ui-widget-content date">2010-02-03 11:29 AM MST</td>
                        <td class="ui-widget-content text"><a href="#" id="itemLink">[Item of great goodness]</a> [AR] [WH]</td>
                        <td class="ui-widget-content number">-150</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="tabs-point">
            <table width="100%">
                <thead>
                    <tr>
                        <th class="ui-widget ui-state-default ui-corner-tl" width="30%">Date</th>
                        <th class="ui-widget ui-state-default" width="50%">Reason</th>
                        <th class="ui-widget ui-state-default ui-corner-tr" width="20%">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ui-widget-content date">2010-02-03 11:29 AM MST</td>
                        <td class="ui-widget-content text"><a href="#" id="historyLink">ontime</a></td>
                        <td class="ui-widget-content number">5</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="tabs-raid">
            <table width="50%" align="center">
                <thead>
                    <tr>
                        <th class="ui-widget ui-state-default ui-corner-tl" width="60%">Date</th>
                        <th class="ui-widget ui-state-default ui-corner-tr" width="40%">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="ui-widget-content date">2010-02-03</td>
                        <td class="ui-widget-content number">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

